<template>
    <view class="index">
        <view class="tabs">
            <liuyuno-tabs :tabData="tabs" :defaultIndex="defaultIndex" @tabClick='tabClick'/>
        </view>
        <block v-if="defaultIndex === 0">
            <block>
                <view class="input-row"
                      style="display: flex;background-color: #FFFFFF;margin: 9px 9px 0 9px ;border-radius: 5px;">
                    <view class="input-group" style="display: flex;margin: 8px 15px;width: 100%;">
                        <view class="input-row" style="display: flex;">
                            <text class="title" style="line-height: 60rpx;">性别：</text>
                            <xfl-select :list="stutasList" :clearable="false" :v-model="sex" :showItemNum="5"
                                        :style_Container="'min-width: 180px;height: 30px'" :placeholder="'性别'"
                                        :selectHideType="'hideAll'" @change="changeSex">
                            </xfl-select>
                        </view>
                    </view>
                </view>
                <view class="input-row"
                      style="display: flex;background-color: #FFFFFF;margin: 9px 9px 0 9px ;border-radius: 5px;">
                    <view class="input-group" style="display: flex;margin: 8px 15px;width: 100%;">
                        <view class="input-row" style="display: flex;">
                            <text class="title" style="line-height: 60rpx;">感情：</text>
                            <xfl-select :list="environmentList" :clearable="false" :showItemNum="5"
                                        :style_Container="'min-width: 180px;height: 30px'" :placeholder="'没有感情'"
                                        :selectHideType="'hideAll'" @change="changeEnvi">
                                {{this.environment}}
                            </xfl-select>
                        </view>
                    </view>
                </view>
            </block>
            <block v-for="(item, index) in breakList" :key="index">
                <view class="card">
                    <view class="car-title-view">
                        <view class="width100 row-center">
                            {{item.name}}
                        </view>
                        <view class="width100 row-center">
                            {{item.creator}}
                        </view>
                        <view class="width100" style="text-indent:2em;">
                            {{item.context}}
                        </view>
                    </view>
                </view>
            </block>
        </block>
        <block v-if="defaultIndex === 1">
            <block>
                <view class="input-row" style="display: flex;background-color: #FFFFFF;margin: 9px 9px 0 9px">
                    <view class="input-group" style="display: flex;margin: 8px 15px;width: 100%;">
                        <view class="input-row" style="display: flex;">
                            <text class="title" style="line-height: 60rpx;">年龄：</text>
                            <xfl-select :list="iageList" :clearable="false" :showItemNum="5"
                                        :style_Container="'min-width: 180px;height: 30px'" :placeholder="'请选择'"
                                        :selectHideType="'hideAll'" @change="changeIage">
                            </xfl-select>
                        </view>
                    </view>
                </view>

                <view class="input-row" style="display: flex;background-color: #FFFFFF;margin: 0px 9px 0 9px ">
                    <view class="input-group" style="display: flex;margin: 8px 15px;width: 100%;">
                        <view class="input-row" style="display: flex;">
                            <text class="title" style="line-height: 60rpx;">性别：</text>
                            <xfl-select :list="isex" :clearable="false" :showItemNum="5"
                                        :style_Container="'min-width: 180px;height: 30px'" :placeholder="'请选择'"
                                        :selectHideType="'hideAll'" @change="changeIsex">
                            </xfl-select>
                        </view>
                    </view>
                </view>


                <view class="input-row" style="display: flex;background-color: #FFFFFF;margin: 0px 9px 0 9px ">
                    <view class="input-group" style="display: flex;margin: 8px 15px;width: 100%;">
                        <view class="input-row" style="display: flex;">
                            <text class="title" style="line-height: 60rpx;">兴趣：</text>
                            <xfl-select :list="ihobby" :clearable="false" :showItemNum="5"
                                        :style_Container="'min-width: 180px;height: 30px'" :placeholder="'请性别'"
                                        :selectHideType="'hideAll'" @change="changeIhobby">
                            </xfl-select>
                        </view>
                    </view>
                </view>
                <view class="input-row" style="display: flex;background-color: #FFFFFF;margin: 0px 9px 0 9px ">
                    <view class="input-group" style="display: flex;margin: 8px 15px;width: 100%;">
                        <view class="input-row" style="display: flex;">
                            <text class="title" style="line-height: 60rpx;">口头禅：</text>
                            <xfl-select :list="ilip" :clearable="false" :showItemNum="5"
                                        :style_Container="'min-width: 180px;height: 30px'" :placeholder="'请性别'"
                                        :selectHideType="'hideAll'" @change="changeIlip">
                            </xfl-select>
                        </view>
                    </view>
                </view>

                <view class="input-row" style="display: flex;background-color: #FFFFFF;margin: 0px 9px 0 9px ">
                    <view class="input-group" style="display: flex;margin: 8px 15px;width: 100%;">
                        <view class="input-row" style="display: flex;">
                            <text class="title" style="line-height: 60rpx;">经常给钱：</text>
                            <xfl-select :list="yn" :clearable="false" :showItemNum="5"
                                        :style_Container="'min-width: 180px;height: 30px'" :placeholder="'请选择'"
                                        :selectHideType="'hideAll'" @change="changeImoney">
                            </xfl-select>
                        </view>
                    </view>
                </view>

                <view class="input-row" style="display: flex;background-color: #FFFFFF;margin: 0px 9px 0 9px ">
                    <view class="input-group" style="display: flex;margin: 8px 15px;width: 100%;">
                        <view class="input-row" style="display: flex;">
                            <text class="title" style="line-height: 60rpx;">是否自我：</text>
                            <xfl-select :list="yn" :clearable="false" :showItemNum="5"
                                        :style_Container="'min-width: 180px;height: 30px'" :placeholder="'请选择'"
                                        :selectHideType="'hideAll'" @change="changeIsayhello">
                            </xfl-select>
                        </view>
                    </view>
                </view>

                <view class="input-row" style="display: flex;background-color: #FFFFFF;margin: 0px 9px 0 9px ">
                    <view class="input-group" style="display: flex;margin: 8px 15px;width: 100%;">
                        <view class="input-row" style="display: flex;">
                            <text class="title" style="line-height: 60rpx;">微信回复：</text>
                            <xfl-select :list="weixinList" :clearable="false" :showItemNum="5"
                                        :style_Container="'min-width: 180px;height: 30px'" :placeholder="'请选择'"
                                        :selectHideType="'hideAll'" @change="changeIweixin">
                            </xfl-select>
                        </view>
                    </view>
                </view>

                <view class="input-row" style="display: flex;background-color: #FFFFFF;margin: 0px 9px 0 9px ">
                    <view class="input-group" style="display: flex;margin: 8px 15px;width: 100%;">
                        <view class="input-row" style="display: flex;">
                            <text class="title" style="line-height: 60rpx;">厌烦对方：</text>
                            <xfl-select :list="yn" :clearable="false" :showItemNum="5"
                                        :style_Container="'min-width: 180px;height: 30px'" :placeholder="'请选择'"
                                        :selectHideType="'hideAll'" @change="changeIsick">
                            </xfl-select>
                        </view>
                    </view>
                </view>
                <view class="input-row" style="display: flex;background-color: #FFFFFF;margin: 0px 9px 0 9px ">
                    <view class="input-group" style="display: flex;margin: 8px 15px;width: 100%;">
                        <view class="input-row" style="display: flex;">
                            <text class="title" style="line-height: 60rpx;">主观打分：</text>
                            <xfl-select :list="inumList" :clearable="false" :showItemNum="5"
                                        :style_Container="'min-width: 180px;height: 30px'" :placeholder="'越大越舔狗'"
                                        :selectHideType="'hideAll'" @change="changeIsub">
                            </xfl-select>
                        </view>
                    </view>
                </view>


                <view class="input-group">
                    <button type="warn" class="feedback-submit " style="background-color: #3366CC;" @click="sendData">
                        提交
                    </button>

                </view>
								
								<view class="charts-box">
								  <qiun-data-charts
								    type="pie"
								    :chartData="chartData"
								    background="none"
								  />
								</view>
								<view class="charts-box">
								  <qiun-data-charts
								    type="column"
								    :chartData="chartDatas"
								    background="none"
								  />
								</view>
								<!-- <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" bindtouchstart="touchColumn"></canvas> -->
								
								

                <!-- <wyb-popup ref="assign" type="center" height="530" width="500" radius="6" :showCloseIcon="true">
                     <view class="width100 row-center" style="font-size: 16px;">
                         {{this.result}}
                     </view>
                 </wyb-popup>-->
            </block>
        </block>
    </view>
</template>
<script>
    import wybTable from '@/components/wyb-table/wyb-table.vue'
    import liuyunoTabs from '@/components/liuyuno-tabs/liuyuno-tabs.vue';
    import util, {
        parGetData,
        parSetData,
        checklogin
    } from '../../common/util';

    export default {
        data() {
            return {
							chartDatas:{
							   categories: [
							          "2016",
							          "2017",
							          "2018",
							          "2019",
							          "2020",
							          "2021"
							      ],
							      series: [
							          {
							              "name": "目标值",
							              "data": [
							                  35,
							                  36,
							                  31,
							                  33,
							                  13,
							                  34
							              ]
							          },
							          {
							              "name": "完成量",
							              "data": [
							                  18,
							                  27,
							                  21,
							                  24,
							                  6,
							                  28
							              ]
							          }
							      ]
							},
							chartData:{
								categories:[],
							  series: [{
							    name: "groupA",
							    data: [
							      {
							        name: "一班",
							        value: 50
							      }, {
							        name: "二班",
							        value: 30
							      }, {
							        name: "三班",
							        value: 20
							      }, {
							        name: "四班",
							        value: 18
							      }, {
							        name: "五班",
							        value: 8
							      }
							    ]
							  }]
							},
                Identify: [],
                ihobby : [],
                ilip : [],
                breakList: [],
                ident: {
                    age: 1,
                    hobby: 1,
                    lip: 1,
                    money: 1,
                    sayhello: 1,
                    sex: 1,
                    sick: 1,
                    subjective: 1,
                    weixin: 1
                },
                sex: '',
                environment: '',
                result: '',
                tabs: ['分手宣言', '舔狗鉴定'],
                defaultIndex: 0,
                stutasList: [{
                    value: '中性',
                    type: ''
                },
                    {
                        value: '男',
                        type: '1'
                    },
                    {
                        value: '女',
                        type: '0'
                    }
                ], iageList: [{
                    value: '1-20岁',
                    type: '20'
                },
                    {
                        value: '20-30岁',
                        type: '30'
                    },
                    {
                        value: '30-45岁',
                        type: '40'
                    },
                    {
                        value: '45-50岁',
                        type: '50'
                    },
                    {
                        value: '50岁以上',
                        type: '70'
                    }
                ], environmentList: [{
                    value: '无',
                    type: ''
                },
                    {
                        value: '坚强',
                        type: '0'
                    },
                    {
                        value: '矫情',
                        type: '1'
                    },
                    {
                        value: '无厘头',
                        type: '2'
                    }
                ], yn: [{
                    value: '是',
                    type: '1'
                },{
                    value: '否',
                    type: '0'
                }],
                // 4秒回 3半个钟头 2 1  0
                weixinList: [{
                    value: '找他只能打电话',
                    type: '0'
                }, {
                    value: '早晚会回复',
                    type: '1'
                },
                    {
                        value: '爱答不理',
                        type: '2'
                    }, {
                        value: '半个钟头以内',
                        type: '3'
                    },
                    {
                        value: '秒回',
                        type: '4'
                    }], inumList: [{
                    value: '1分',
                    type: '1'
                }, {
                    value: '2分',
                    type: '2'
                }, {
                    value: '3分',
                    type: '3'
                }, {
                    value: '4分',
                    type: '4'
                }, {
                    value: '5分',
                    type: '5'
                }, {
                    value: '6分',
                    type: '6'
                }, {
                    value: '7分',
                    type: '7'
                }, {
                    value: '8分',
                    type: '8'
                }, {
                    value: '9分',
                    type: '9'
                }, {
                    value: '10分',
                    type: '10'
                }], isex: [{
                    value: '男',
                    type: '1'
                }, {
                    value: '女',
                    type: '0'
                }
                ],
            };
        },
        components: {
            wybTable,
            liuyunoTabs
        },
        created() {
            this.getBreak();
            this.getIdentify();
        },
        methods: {
						sendData() {
                uni.request({
                    url: util.apiurl + 'generator/assess/identify',
                    method: 'POST',
                    dataType: 'json',
                    data: this.ident,
                    success: function (ret) {
                        if (ret.data.code == 200) {
                            wx.showModal({
                                title: '鉴定结果',
                                content: ret.data.data,
                                success: function (res) {
                                    if (res.confirm) {//这里是点击了确定以后
                                    } else {//这里是点击了取消以后
                                    }
                                }
                            });
                        }
                    },
                    fail: res => {
                        console.log(JSON.stringify(res));
                        uni.showToast({
                            title: '请求数据失败请重试1',
                            duration: 2000,
                            icon: 'none'
                        });
                    },


                });

                // this.$refs.assign.show();
            },
            tabClick(index) {
                this.defaultIndex = index;
            },
            getBreak() {
                var self = this;
                uni.request({
                    url: util.apiurl + 'generator/break/list',
                    method: 'POST',
                    dataType: 'json',
                    data: {
                        sex: this.sex,
                        environment: this.environment,
                    },
                    success: function (ret) {
                        if (ret.data.code == 200) {
                            self.breakList = ret.data.data.list;
                        }
                    },
                    fail: res => {
                        console.log(JSON.stringify(res));
                        uni.showToast({
                            title: '请求数据失败请重试1',
                            duration: 2000,
                            icon: 'none'
                        });
                    },
                });
            },
            getIdentify() {
                var self = this;
                uni.request({
                    url: util.apiurl + '/generator/lip/list',
                    method: 'GET',
                    dataType: 'json',
                    data: {},
                    success: function (ret) {
                        self.ilip=  ret.data.data;

                    },
                    fail: res => {
                        console.log(JSON.stringify(res));
                        uni.showToast({
                            title: '请求数据失败请重试1',
                            duration: 2000,
                            icon: 'none'
                        });
                    },
                });
                uni.request({
                    url: util.apiurl + '/generator/hobby/list',
                    method: 'GET',
                    dataType: 'json',
                    data: {},
                    success: function (ret) {
                        self.ihobby = ret.data.data;

                    },
                    fail: res => {
                        console.log(JSON.stringify(res));
                        uni.showToast({
                            title: '请求数据失败请重试1',
                            duration: 2000,
                            icon: 'none'
                        });
                    },
                });
            },
            changeSex(value) {
                this.sex = value.orignItem.type;
                this.getBreak();
            },
            changeEnvi(value) {
                this.environment = value.orignItem.type;
                this.getBreak();
            },
            changeIage(value) {
                this.ident.age = value.orignItem.type;
            },
            changeIlip(value) {
                this.ident.lip = value.orignItem.type;
            },
            changeIhobby(value) {
                this.ident.hobby = value.orignItem.type;
            },
            changeImoney(value) {
                this.ident.money = value.orignItem.type;
            },
            changeIsayhello(value) {
                this.ident.sayhello = value.orignItem.type;
            },
            changeIsex(value) {
                this.ident.sex = value.orignItem.type;
            },
            changeIsick(value) {
                this.ident.sick = value.orignItem.type;
            }, changeIsub(value) {
                this.ident.subjective = value.orignItem.type;
            }, changeIweixin(value) {
                this.ident.weixin = value.orignItem.type;
            },
        }
    };
</script>

<style>
	.charts-box {
		width: 100%;
		height: 500px;
	}
	/* .qiun-charts {
	  width: 750rpx;
	  height: 500rpx;
	  background-color: #FFFFFF;
	}
	.charts {
	  width: 750rpx;
	  height: 500rpx;
	  background-color: #FFFFFF;
	} */
    .wyb-table-box,
    .wyb-table-content,
    .wyb-table-scroll-view {
        display: block;
    }

    .family-add-btn {
        width: 60%;
        height: 60 rpx;
        font-size: 34 rpx;
        margin: 45 rpx;
        line-height: 60 rpx;
    }

    .popup-add-title {
        width: 100%;
        text-align: center;
        display: block;
        font-size: 40 rpx;
        margin: 20 rpx 0;
    }

    .iconfont {
        font-size: 36 rpx !important;
    }

    .width100 {
        width: 100% !important;
    }

    .row-center {
        text-align: center;
    }

    .reply-btn {
        width: 50%;
        height: 70 rpx;
        font-size: 32 rpx;
        margin: 15 rpx;
    }
</style>
